<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="left">
                <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
            </view>
            <view class="title">患者评价</view>
        </view>
        
        <!-- 评价统计 -->
        <view class="stats-section">
            <view class="overall">
                <view class="score">{{doctorInfo.score}}</view>
                <view class="rating">
                    <u-rate 
                        v-model="doctorInfo.score" 
                        size="24" 
                        active-color="#FFB800"
                        inactive-color="#E8E8E8"
                        disabled
                    ></u-rate>
                </view>
                <view class="count">共{{doctorInfo.reviewCount}}条评价</view>
            </view>
            
            <view class="tags">
                <view 
                    class="tag" 
                    v-for="(item, index) in tags" 
                    :key="index"
                    :class="{'active': currentTag === item.name}"
                    @click="switchTag(item.name)"
                >
                    <text>{{item.name}}</text>
                    <text class="count">{{item.count}}</text>
                </view>
            </view>
        </view>
        
        <!-- 评价列表 -->
        <scroll-view class="review-scroll" scroll-y @scrolltolower="loadMore">
            <view class="review-list">
                <view class="review-item" v-for="(item, index) in reviewList" :key="index">
                    <view class="header">
                        <view class="user">
                            <image class="avatar" :src="item.user.avatar" mode="aspectFill"></image>
                            <view class="info">
                                <view class="name">{{item.user.name}}</view>
                                <view class="time">{{item.time}}</view>
                            </view>
                        </view>
                        <view class="rating">
                            <u-rate 
                                v-model="item.score" 
                                size="24" 
                                active-color="#FFB800"
                                inactive-color="#E8E8E8"
                                disabled
                            ></u-rate>
                        </view>
                    </view>
                    
                    <view class="content">
                        <view class="tags" v-if="item.tags.length">
                            <view class="tag" v-for="(tag, idx) in item.tags" :key="idx">
                                {{tag}}
                            </view>
                        </view>
                        
                        <view class="text">{{item.content}}</view>
                        
                        <view class="images" v-if="item.images.length">
                            <image 
                                v-for="(img, idx) in item.images" 
                                :key="idx"
                                :src="img"
                                mode="aspectFill"
                                @click="previewImage(item.images, idx)"
                            ></image>
                        </view>
                    </view>
                    
                    <view class="footer">
                        <view class="doctor-reply" v-if="item.reply">
                            <view class="label">医生回复：</view>
                            <view class="text">{{item.reply}}</view>
                        </view>
                    </view>
                </view>
            </view>
            
            <!-- 加载更多 -->
            <view class="load-more" v-if="hasMore">
                <u-loadmore status="loading" />
            </view>
            
            <!-- 无数据 -->
            <view class="empty" v-if="reviewList.length === 0">
                <image src="/static/images/empty.png" mode="aspectFit"></image>
                <text>暂无评价</text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            doctorId: '',
            doctorInfo: {
                score: 4.8,
                reviewCount: 128
            },
            tags: [
                { name: '全部', count: 128 },
                { name: '医术精湛', count: 98 },
                { name: '态度和蔼', count: 85 },
                { name: '耐心细致', count: 76 },
                { name: '专业负责', count: 65 }
            ],
            currentTag: '全部',
            reviewList: [],
            page: 1,
            hasMore: true
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        switchTag(tag) {
            this.currentTag = tag
            this.page = 1
            this.hasMore = true
            this.loadReviews()
        },
        loadReviews() {
            // 模拟加载数据
            setTimeout(() => {
                const list = [
                    {
                        id: 1,
                        user: {
                            name: '王**',
                            avatar: '/static/images/avatar1.png'
                        },
                        time: '2024-03-20',
                        score: 5,
                        tags: ['医术精湛', '态度和蔼'],
                        content: '医生很专业，态度也很好，详细解答了我的问题，非常感谢！',
                        images: [
                            '/static/images/review1.jpg',
                            '/static/images/review2.jpg'
                        ],
                        reply: '感谢您的评价，祝您早日康复！'
                    },
                    {
                        id: 2,
                        user: {
                            name: '李**',
                            avatar: '/static/images/avatar2.png'
                        },
                        time: '2024-03-18',
                        score: 4,
                        tags: ['专业负责'],
                        content: '医生很负责任，治疗方案也很合理，治疗效果不错。',
                        images: [],
                        reply: ''
                    }
                ]
                
                if (this.page === 1) {
                    this.reviewList = list
                } else {
                    this.reviewList = [...this.reviewList, ...list]
                }
                
                this.hasMore = this.page < 3
                this.page++
            }, 500)
        },
        loadMore() {
            if (!this.hasMore) return
            this.loadReviews()
        },
        previewImage(images, current) {
            uni.previewImage({
                urls: images,
                current: current
            })
        },
        // 加载医生信息
        loadDoctorInfo() {
            // 这里应该根据doctorId加载医生信息
            // 模拟加载数据
            setTimeout(() => {
                this.doctorInfo = {
                    id: this.doctorId,
                    name: '张医生',
                    avatar: '/static/images/doctor.png',
                    title: '主任医师',
                    hospital: '北京协和医院',
                    department: '神经内科',
                    score: 4.8,
                    reviewCount: 128
                }
                
                // 更新标签数量
                this.tags[0].count = this.doctorInfo.reviewCount;
            }, 300);
        }
    },
    onLoad(options) {
        if (options.doctorId) {
            this.doctorId = options.doctorId;
            this.loadDoctorInfo();
        }
        this.loadReviews();
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
    }
    
    .stats-section {
        background-color: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        
        .overall {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 30rpx;
            
            .score {
                font-size: 48rpx;
                color: #FFB800;
                font-weight: bold;
                margin-bottom: 10rpx;
            }
            
            .rating {
                margin-bottom: 10rpx;
            }
            
            .count {
                font-size: 24rpx;
                color: #999;
            }
        }
        
        .tags {
            display: flex;
            flex-wrap: wrap;
            
            .tag {
                padding: 10rpx 20rpx;
                background-color: #F7F7FA;
                border-radius: 30rpx;
                font-size: 24rpx;
                color: #666;
                margin-right: 20rpx;
                margin-bottom: 20rpx;
                display: flex;
                align-items: center;
                
                &.active {
                    color: #1890FF;
                    background-color: #E6F7FF;
                }
                
                .count {
                    margin-left: 10rpx;
                    color: #999;
                }
            }
        }
    }
    
    .review-scroll {
        height: calc(100vh - 400rpx);
        
        .review-list {
            padding: 20rpx;
            
            .review-item {
                background-color: #fff;
                border-radius: 20rpx;
                margin-bottom: 20rpx;
                overflow: hidden;
                
                .header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 20rpx 30rpx;
                    border-bottom: 2rpx solid #F7F7FA;
                    
                    .user {
                        display: flex;
                        align-items: center;
                        
                        .avatar {
                            width: 80rpx;
                            height: 80rpx;
                            border-radius: 40rpx;
                            margin-right: 20rpx;
                        }
                        
                        .info {
                            .name {
                                font-size: 28rpx;
                                color: #333;
                                font-weight: bold;
                                margin-bottom: 6rpx;
                            }
                            
                            .time {
                                font-size: 24rpx;
                                color: #999;
                            }
                        }
                    }
                }
                
                .content {
                    padding: 30rpx;
                    
                    .tags {
                        display: flex;
                        flex-wrap: wrap;
                        margin-bottom: 20rpx;
                        
                        .tag {
                            padding: 6rpx 16rpx;
                            background-color: #E6F7FF;
                            border-radius: 20rpx;
                            font-size: 24rpx;
                            color: #1890FF;
                            margin-right: 20rpx;
                            margin-bottom: 20rpx;
                        }
                    }
                    
                    .text {
                        font-size: 28rpx;
                        color: #333;
                        line-height: 1.6;
                        margin-bottom: 20rpx;
                    }
                    
                    .images {
                        display: flex;
                        flex-wrap: wrap;
                        
                        image {
                            width: 160rpx;
                            height: 160rpx;
                            border-radius: 10rpx;
                            margin-right: 20rpx;
                            margin-bottom: 20rpx;
                        }
                    }
                }
                
                .footer {
                    padding: 20rpx 30rpx;
                    background-color: #F7F7FA;
                    
                    .doctor-reply {
                        .label {
                            font-size: 24rpx;
                            color: #666;
                            margin-bottom: 10rpx;
                        }
                        
                        .text {
                            font-size: 28rpx;
                            color: #333;
                            line-height: 1.6;
                        }
                    }
                }
            }
        }
        
        .load-more {
            padding: 20rpx 0;
        }
        
        .empty {
            padding: 100rpx 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            
            image {
                width: 200rpx;
                height: 200rpx;
                margin-bottom: 20rpx;
            }
            
            text {
                font-size: 24rpx;
                color: #999;
            }
        }
    }
}
</style> 